<template>
    <div class="goodsDetail-container">
        <h1>{{goodsDetail.title}}</h1>
        <hr>
        <div class="goods-detail-content" v-html="goodsDetail.content">

        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodsDetail",
        data() {
            return {
                goodsDetail: {}
            }
        },
        created() {
            this.getGoodsDetail()
        },
        methods: {
            getGoodsDetail() {
                this.axios.get(`goods/getdesc/${this.$route.params.id}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            this.goodsDetail = response.data.message[0];
                        } else {
                            this.$toast('获取商品详情失败!');
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .goods-detail-content {
        font-size: 30px;
        line-height: 30px;
    }
    .goodsDetail-container {
        padding: 0 10px;
    }
    .goodsDetail-container h1 {
        color: #226aff;
        text-align: center;
        margin: 15px 0;
    }
    .goods-detail-content >>> img {
        width: 100%;
        height: 100%;
    }
    .goods-detail-content >>> p img {
        width: 100%;
        height: 100%;
    }
    .goods-detail-content >>> table tr td img {
        width: 130%;
        height: 145%;
    }
    .goods-detail-content >>> p {
        font-size: 30px;
        line-height: 30px;
    }
</style>